<template>
	<!-- 整个页面的容器 -->
	<view class="page-container">

		<!-- 搜索栏区域 -->
		<view class="search-bar">
			<!-- 模拟搜索图标区域，目前清除了静态图片引用 -->
			<image class="search-icon"></image>
			<!-- 搜索输入框 -->
			<input type="text" placeholder="搜索" class="search-input" />
		</view>
		<view class="l-botton">
			<!-- 排序容器区域 -->
			<!-- 			<view class="sort-container">
				<uni-section title="排序规则" type="line">
					<uni-data-select v-model="value" :localdata="range" @change="change"></uni-data-select>
				</uni-section>
			</view> -->
			<!-- 使用v-for循环遍历门店列表，展示每个门店信息 -->
			<view v-for="(store, index) in storeList" :key="index" class="store-item">
				<!-- 门店图片区域，绑定门店数据中的图片路径，目前清除了静态图片引用 -->
				<image class="store-image" :src="store.images[0]"></image>
				<!-- 门店详细信息容器 -->
				<view class="store-info">
					<!-- 门店名称 -->
					<!-- 门店名称 -->
					<text
						class="store-name">{{store.callout && store.callout.content ? store.callout.content : '无名称'}}</text>
					<!-- 门店距离 -->
					<text class="distance">{{store.distance}}</text>
					<!-- 评分展示容器 -->
					<view class="rating-container">
						<!-- 循环展示每个评分星星图标，目前清除了静态图片引用 -->
						<uni-rate size="18" :readonly="true" :value="store.star" />
						<view class="star">{{star}}</view>
						<!-- 评分分数 -->
						<text class="rating-score">{{store.store}}</text>
						<!-- 销量信息 -->
						<!-- <text class="sales">销量: {{store.sales}}</text> -->
					</view>
					<!-- 营业时间 -->
					<text class="business-time">营业时间: {{store.businessHours}}</text>
					<!-- 门店地址 -->
					<view class="address">地址:{{store.detailedAddress}}</view>
				</view>
			</view>
		</view>
		<!-- 当门店列表为空时，展示“暂无更多”提示 -->
		<view v-if="storeList.length === 0" class="no-more">暂无更多</view>
	</view>
</template>
<script setup>
	// 引入Vue的ref函数，用于创建响应式数据
	import {
		ref,
		onMounted
	} from 'vue';
	import request from '@/utils/request.js';
	let value = ref()
	let range = ref([{
		value: 0,
		text: "综合排序"
	}, {
		value: 1,
		text: "评分最高"
	}, {
		value: 2,
		text: "销量最高"
	}])
	// 创建一个响应式的门店列表数据，包含一个门店示例数据
	const storeList = ref([{
		"id": 1,
		"latitude": 34.74971030689475,
		"longitude": 113.61132234334946,
		"title": "张三修车店1",
		"width": 35,
		"height": 35,
		"animation": "expand",
		"callout": {
			"content": "张三修车店1",
			"bgColor": "#f0f9ff",
			"borderRadius": 8,
			"padding": 12,
			"textAlign": "center",
			"display": "ALWAYS"
		},
		"distance": "247.3399m",
		"phoneNumber": "123456789",
		"detailedAddress": "出门左转上天台",
		"images": [
			"https://siwjd.oss-cn-beijing.aliyuncs.com/image/8d4676d5-ad08-40ef-b1c0-4887f9bf1650_CMg1ldVRSggp0c64d7ac8de03681960cb3ce296122fd.png",
			"https://siwjd.oss-cn-beijing.aliyuncs.com/image/e6691f74-daed-434a-877f-e16ade051dbd_lYnwL1LeA88930ba1d9018e4e2232303743087e05a0f.jpg",
			"https://siwjd.oss-cn-beijing.aliyuncs.com/image/29d07175-659b-4a74-8135-22937a843649_i3Z5XZuzkWfU631f794b16ee293187d08d0e44a40405.jpg"
		],
		"businessHours": "二十四小时营业",
		"star": 0,
		"merchantId": 1
	}]);
	onMounted(async () => {
		try {
			// 获取位置信息
			const res = await uni.getLocation({
				type: 'wgs84',
				enableHighAccuracy: true
			})
			// 在位置信息获取成功后再发起请求
			//animation: "expand"
			// businessHours: "二十四小时营业"
			// callout: {content: "张三修车店1", bgColor: "#f0f9ff", borderRadius: 8, padding: 12, textAlign: "center", …}
			// detailedAddress: "出门左转上天台"
			// distance: "247.3399m"
			// height: 35
			// id: 1
			// images: (3) ["https://siwjd.oss-cn-beijing.aliyuncs.com/image/8d…_CMg1ldVRSggp0c64d7ac8de03681960cb3ce296122fd.png", "https://siwjd.oss-cn-beijing.aliyuncs.com/image/e6…_lYnwL1LeA88930ba1d9018e4e2232303743087e05a0f.jpg", "https://siwjd.oss-cn-beijing.aliyuncs.com/image/29…_i3Z5XZuzkWfU631f794b16ee293187d08d0e44a40405.jpg"]
			// latitude: 34.74971030689475
			// longitude: 113.61132234334946
			// merchantId: 1
			// phoneNumber: "123456789"
			// star: 0
			// title: "张三修车店1"
			// width: 35
			request({
				url: `/liu/geo/radius?latitude=${res.latitude}&longitude=${res.longitude}&radius=3000`,
				method: 'get',
			}).then(res => {
				console.log("商家", res);
				storeList.value = res;
				console.log("商家", storeList.value);
			}).catch(err => {
				console.error('请求失败:', err);
			});
			console.log('定位成功:', res)
		} catch (error) {
			console.error('定位失败:', error)
			uni.showToast({
				title: '获取位置失败',
				icon: 'none'
			})
		}
	})


	const change = () => {
		console.log(value.value);
	}
</script>

<style>
	/* 页面整体容器样式，设置背景颜色和内边距 */
	.page-container {
		background-color: #f4f4f4;
		padding: 20px;
	}

	/* 搜索栏样式，设置弹性布局，内容垂直居中，背景颜色，边框圆角和内边距，底部外边距 */
	.search-bar {
		display: flex;
		align-items: center;
		background-color: #fff;
		border-radius: 5px;
		padding: 8px 10px;
		margin-bottom: 15px;
	}

	/* 搜索图标样式，设置宽高和背景相关样式，目前无背景图片，右边外边距 */
	.search-icon {
		width: 20px;
		height: 20px;
		background-size: contain;
		margin-right: 10px;
	}

	/* 搜索输入框样式，设置弹性布局占满剩余空间，无边框和轮廓，字体大小 */
	.search-input {
		flex: 1;
		border: none;
		outline: none;
		font-size: 14px;
	}

	.l-botton {
		background-color: #fff;
	}

	/* 排序容器样式，设置弹性布局，内容垂直居中，背景颜色，边框圆角和内边距，底部外边距 */
	.sort-container {
		display: flex;
		align-items: center;
		background-color: #fff;
		border-radius: 5px;
		padding: 8px 10px;
		margin-bottom: 15px;
	}

	/* 排序标签样式，设置字体大小 */
	.sort-label {
		font-size: 14px;
	}

	/* 排序箭头图标样式，设置宽高和背景相关样式，目前无背景图片，左边外边距 */
	.sort-arrow {
		width: 10px;
		height: 10px;
		background-size: contain;
		margin-left: 10px;
	}

	/* 单个门店信息项样式，设置弹性布局，背景颜色，边框圆角，内边距和底部外边距 */
	.store-item {
		display: flex;
		background-color: #fff;
		border-radius: 5px;
		padding: 15px;
		margin-bottom: 15px;
	}

	/* 门店图片样式，设置宽高，边框圆角和右边外边距 */
	.store-image {
		width: 80px;
		height: 60px;
		border-radius: 5px;
		margin-right: 15px;
	}

	/* 门店详细信息容器样式，设置弹性布局占满剩余空间 */
	.store-info {
		flex: 1;
	}

	/* 门店名称样式，设置字体大小和加粗，底部外边距 */
	.store-name {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 5px;
	}

	/* 门店距离样式，设置字体大小，颜色和底部外边距 */
	.distance {
		font-size: 14px;
		color: #1d76ff;
		margin-bottom: 5px;
		margin-left: 5px;
	}

	/* 评分展示容器样式，设置弹性布局，内容垂直居中，底部外边距 */
	.rating-container {
		display: flex;
		align-items: center;
		margin-bottom: 5px;
	}

	/* 评分星星图标样式，设置宽高，背景相关样式和右边外边距 */
	.star-icon {
		width: 18px;
		height: 18px;
		background-size: contain;
		margin-right: 2px;
	}

	/* 评分分数样式，设置字体大小，颜色和左边外边距 */
	.rating-score {
		font-size: 14px;
		color: #999;
		margin-left: 5px;
	}

	/* 销量信息样式，设置字体大小，颜色和底部外边距 */
	.sales {
		font-size: 14px;
		color: #999;
		margin-bottom: 5px;
		margin-top: 5px;
		margin-left: 5px;
	}

	/* 营业时间样式，设置字体大小，颜色和底部外边距 */
	.business-time {
		font-size: 14px;
		color: #999;
		margin-bottom: 5px;
	}

	/* 门店地址样式，设置字体大小和颜色 */
	.address {
		font-size: 14px;
		color: #999;
	}

	/* 暂无更多提示样式，设置文本居中，字体大小和颜色 */
	.no-more {
		text-align: center;
		font-size: 14px;
		color: #999;
	}
</style>